Firefox Developer Tools and Firebug

If you haven’t tried the Firefox Developer Tools in the last 6 months, you owe it to yourself to take another look. Grab the latest Aurora browser, and start up the tools from the Web Developer menu (a submenu of Tools on some platforms).

The tools have improved a lot lately: black-boxing lets you treat sources as system libraries that won’t distract your debugging flow. Source maps let you debug source generated by transpilers or minimizers. The inspector has paint flashing, a new font panel, and a greatly improved style inspector with tab completion and pseudo-elements. The network monitor helps you debug your network activity. The list goes on, and you can read more about recent developments in our series of Aurora Posts.

After getting to know the tools, start the App Manager. Install the Firefox OS Simulator to see how your app will behave on a device. If you have a Firefox OS device running the latest 1.2 nightlies, you can connect the tools directly to the phone.

Why The Built-in Tools?

The Web owes a lot to Firebug. For a long time, Firebug was the best game in town. It introduced the world to visual highlighting of the DOM, inplace editing of styles, and the console API.

Before the release of Firefox 4 we decided that Firefox needed a set of high-quality built-in tools. Baking them into the browser let us take advantage of the existing Mozilla community and infrastructure, and building in mozilla-central makes a huge difference when working with Gecko and Spidermonkey developers. We had ambitious platform changes planned: The JSD API that Firebug uses to debug Javascript had aged badly, and we wanted to co-evolve the tools alongside a new Spidermonkey Debugger API.

We thought long and hard about including Firebug wholesale and considered several approaches to integrating it. An early prototype of the Inspector even included a significant portion of Firebug. Ultimately, integration proved to be too challenging and would have required rewrites that would have been equivalent to starting over.

How is Firebug Doing?

Firebug isn’t standing still. The Firebug Working Group continues to improve it, as you can see in their latest 1.12 release. Firebug is working hard to move from JSD to the new Debugger API, to reap the performance and stability benefits we added for the Firefox Developer Tools.

After that? Jan Odvarko, the Firebug project leader, had this to say:

Firebug has always been maintained rather as an independent project outside of existing processes and Firefox environment while DevTools is a Mozilla in-house project using standard procedures. Note that the Firebug goal has historically been to complement Firefox features and not compete with them (Firebug is an extension after all) and we want to keep this direction by making Firebug a unique tool.

Everyone wants to figure out the best way for Firebug’s community of users, developers, and extension authors to shape and complement the Firefox Developer Tools. The Firebug team is actively discussing their strategy here, but hasn’t decided how they want to accomplish that.

Follow the Firebug blog and @firebugnews account to get involved.

What’s Next for Firefox Developer Tools?

We have more exciting stuff coming down the pipe. Some of this will be new feature work, including great performance analysis and WebGL tools. Much of it will be responding to feedback, especially from developers giving the tools a first try.

We also want to find out what you can add to the tools. Recently the Ember.js Chrome Extension was ported to Firefox Developer Tools as a Sunday hack, but we know there are more ideas out there. Like most Firefox code you can usually find a way to do what you want, but we’re also working to define and publish a Developer Tools API. We want to help developers build high quality, performant developer tools extensions. We’d love to hear from developers writing extensions for Firebug or Chrome Devtools about how to best go about that.

Otherwise, keep following the Hacks blog to learn more about how the Firefox Developer Tools are evolving. Join in at the dev-developer-tools mailing list, the @FirefoxDevTools Twitter account, or #devtools on irc.mozilla.org.

Technical Evangelist & Editor of Mozilla Hacks. Gives talks & blogs about HTML5, JavaScript & the Open Web. Robert is a strong believer in HTML5 and the Open Web and has been working since 1999 with Front End development for the web - in Sweden and in New York City. He regularly also blogs at http://robertnyman.com and loves to travel and meet people.

More articles by Robert Nyman [Editor emeritus]…

71 comments

Mindaugas J.

Hey guys, what is the best place to offer feedback for dev tools? We are maintaining an extension and trying to debug it in a similar fashion as in chrome devtools but, to paraphrase, Browser debugger works in mysterious ways.

October 8th, 2013 at 11:20
1. Dave Camp
  
  Tweeting at @FirefoxDevTools is the easiest way to send 140-character feedback – usually we’ll respond quickly with a bug number you can use to track progress.
  
  For more in-depth discussions there is the mailing list at https://lists.mozilla.org/listinfo/dev-developer-tools
  
  October 9th, 2013 at 09:06
Bastian

I used to use Firebug in Firefox, but after even several minutes of working on my projects, and having Firebug enabled, everything started to work slowly, end at the end everything hunged, so i had to restart Firefox…i was so upset, that i switched to Chrome. Native debugger today is completly equivalent for Firebug and i am so pleased having it in Firefox. Salute!

October 8th, 2013 at 12:02
1. Florent
  
  This is due to Firebug relying on the JavaScript-Debugger API (aka JSD, that, as the article said, aged badly).
  
  We work on the migration to JSD2. So the next version will correct that issue.
  
  Until the next version, you’re invited to disable the Script panel. See http://code.google.com/p/fbug/issues/detail?id=6821
  
  Florent
  
  October 8th, 2013 at 14:35
Darrell Banks

Please add the ability to search through ID’s and classes in the inspector panel

October 8th, 2013 at 13:01
1. Dave Camp
  
  There’s a small search field with id and class autocompletion in the upper-right hand corner of the inspector toolbar, does that do what you’re looking for?
  
  October 9th, 2013 at 09:07
Skoua

I’ve stopped using Firebug as it almost freezes my FF everytime I focus a tab using it.

I’m very happy with what you guys did with the new dev tools, they are really fast, easy to use and the UI is way nicer the Firebug’s.

I’m very impatient to see what’s next!

October 8th, 2013 at 13:19
Mike Graf

It made sense that firebug was an extension, there was no need to bloat the codebase with all the developers’ code for those who wont use it. Now we’ll get bigger downloads of source or binaries and potentially slower / bloated software. More lines of code means more bugs, which could mean more security threats (eg, FBI/NSA take downs of Tor browser bundle)… Seems to me it made lots of sense to keep the tools separate.

October 8th, 2013 at 13:21
1. Mike Ratcliffe
  
  Actually, Having the devtools inside of the Firefox codebase guarantees far less bugs. Every single change to our tools is ran against a large test base to ensure that we don’t break the browser. Also, every browser change runs all of our test cases to ensure that they don’t break our tools.
  
  October 9th, 2013 at 03:53
  1. Luke
    
    Yes! And you can immediately help a non-developer see what is wrong with a website, even if they aren’t the type that would install Firebug.
    
    I like how the devtools load on-demand, so there’s no complex switches menu like Firebug – great works guys!
    
    October 11th, 2013 at 07:27
2. fbender
  
  Also, adding new stuff to Firefox should never slow it down (per decree) so you should not worry about Firefox getting slower because of Dev Tools (the logic is mostly lazy-loaded).
  
  October 10th, 2013 at 00:13
JsDebugger

I wont lie, firefox debugger annoys me in that its not firebugs exact same interface. Even minor differences seemed like a change I didn’t ask for. The team should have thought more about the dichotomy between firebug and its own dev tools. I’m in chrome land for the time being.

October 8th, 2013 at 13:23
1. Kep
  
  I completely agree. Something as trivial as moving the DOM element selector button from where Firebug’s is located is very annoying.
  
  I’ve been using Firefox only because of Firebug to so many years. At some point, if Firebug’s performance or utility lags behind such that I need to switch console tools, I’ll switch to Chrome for the bulk of my development. Unless Firefox allows me to move that button…
  
  October 9th, 2013 at 12:32
2. fbender
  
  There’s a light theme coming up for the Dev Tools. I believe you can also create your own style for the Dev Tools, like you can theme the rest of Firefox.
  
  For the default however, it would never make sense to adopt the Firebug layout. The Firefox Dev Tools are something entirely different from Firebug (except for the stuff they work with).
  
  You should have a look at the Dev Tools once in a while to see how they evolve, and file bugs for the stuff you’re missing (at bugzilla.mozilla.org).
  
  October 10th, 2013 at 00:11
Matt Johnson

Firebug and the Firefox tools are simply an awesome & polished toolset. Keep up the great work Mozilla!

By comparison I find the Chrome developer tools very clunky and awkward to use.

October 8th, 2013 at 13:29
Hugo

Ok , you convinced me to try the native tools ! Thanks guys

October 8th, 2013 at 13:29
Mariano Simone

I used to use Firebug for my daily work then I just started using Firefox devtools.

Few months ago I switched to Chrome because of the speed/delay of web inspector and the information it gives about margin/padding.

We don’t really need fancy transitions or effects. Just make it fast and easy to work with it

October 8th, 2013 at 13:32
1. fbender
  
  Try the Dev Tools once in a while, they’re only getting better and better.
  
  Also, no transitions or effects or slowness wherever I check. If you experience problems, please file a bug at bugzilla.mozilla.org!
  
  October 10th, 2013 at 00:15
Konstantine Rybnikov

While native tools in ff and chrome are great, there are always ton of details firebug is better at, and I hope you guys will keep an eye on them when implementing.

p.s.: last time I tried ff dev tools networking panel was really poor in terms of searching/filtering requests (by domain, for example), hope it will get some attention.

October 8th, 2013 at 14:05
1. fbender
  
  Did you check the latest version (try Aurora, it has the latest almost-stable stuff!)? If you miss something, please file a bug!
  
  October 10th, 2013 at 00:16
Rob Gilson

I would consider Firefox if the developer tools weren’t so visually complex. They should be simple but modern with a muted colour scheme. Colour variation should be kept minimal and subtle for the sake of distractible/ADHD developers like me. Monochromatic being the best chromatic here.

I want pure functionality in my dev tools and nothing more.

October 8th, 2013 at 14:18
1. fbender
  
  There’s a light theme coming up, and I suspect you can also create your own theme. Try the Dev Tools once in a while, they’re always improving (you may want to check out the Aurora version that’s always 2 versions ahead and pretty stable).
  
  October 10th, 2013 at 00:18
  1. Bryce Fisher-Fleig
    
    How could I learn more about creating a ff dev tools theme of my own?
    
    November 6th, 2013 at 12:45
Maurizio

There is a missing feature that will make me not to switch from Firebug: editing the whole HTML of a section (with FF dev tools you can just edit one element – element property at time). I use it a lot when I try different layouts on the fly. Is there any plan to implement it?

Thank you from a 10 years Firefox user!

October 8th, 2013 at 14:33
1. Nick Fitzgerald
  
  Yes, it is planned: https://bugzilla.mozilla.org/show_bug.cgi?id=895561
  
  October 8th, 2013 at 14:43
  1. Maurizio
    
    Thank you, I’ll follow its evolution
    
    October 9th, 2013 at 01:09
Steven

I dislike the black “developer tools” window so much, I never use it – I always use Firebug. And for cases where Firebug is not good, I use Chrome to debug. Until the built-in developer tools work visually like firebug (colors, tabs, layout etc.), I will not use the built-in developer tools.

October 8th, 2013 at 14:45
1. Panos Astithas
  
  You can switch between the default dark and a light theme by going to the options panel in the toolbox (the tab on the left with a gear icon) and selecting “Light theme”.
  
  October 9th, 2013 at 11:07
2. Luke
  
  You can theme it differently if you want, with css.
  
  October 15th, 2013 at 22:03
Leho Kraav (@lkraav)

Disable the Script panel to stop Firebug from freezing your tabs. After this, it’s a pleasure to use even during heavy loads.

October 8th, 2013 at 15:54
1. Luke
  
  When are they going to make it load-on-demand like Firefox, instead of the drop down with checkbox to enable/disable it?
  
  October 8th, 2013 at 21:11
2. Bastian
  
  Ok, but then there is no point to use Firebug at all.
  
  October 8th, 2013 at 22:35
3. Skoua
  
  Thanks Leho!
  
  October 9th, 2013 at 01:44
BrianMB

As far as I am aware, Firefox Dev Tools cannot disable clientside cache while open, the way all other browsers’ devtools currently do (including IE).

Screenshot of this feature in Firebug:
http://i.imgur.com/NJHnqow.png

This is a pretty essential feature for any frontend dev suite now. If FDT has it, I’d love to know! If not, please think about prioritizing it.

October 8th, 2013 at 16:51
1. Luke
  
  I think Ctrl+F5 is what you want:
  https://support.mozilla.org/en-US/questions/756676
  
  October 8th, 2013 at 21:08
  1. BrianMB
    
    Unfortunately, it is not.
    
    October 9th, 2013 at 08:00
    1. Mike Ratcliffe
      
      That is:
      https://bugzil.la/864098
      
      I hadn’t done that earlier just because we would only want to do this on a per tab basis.
      
      October 9th, 2013 at 08:21
      1. BrianMB
        
        Yes! F12 Tools’ (IE) analogous feature also operates per-tab, so it’s not an entirely foreign workflow to me.
        
        October 9th, 2013 at 10:00
2. Florent
  
  Hi Brian,
  
  Check that option only when you need it. And be careful that, when you don’t need it anymore, you uncheck it (even if you disable the Net panel or Firebug, because the option remains active).
  
  Florent
  
  October 9th, 2013 at 13:36
jr

Is this article still valid?

https://blog.mozilla.org/devtools/2011/05/25/the-relationship-between-firebug-and-mozilla-developer-tools/

October 8th, 2013 at 18:29
1. Dave Camp
  
  This post is more up-to-date than the 2011 article.
  
  October 9th, 2013 at 09:15
Bhaavan Merchant

Please merge Firebug into Firefox Dev tools. It is really essential for web dev, and your research already shows that. Having it out of the box harms no one, and benefits developers, who require one less extension. Also bringing it into firefox, will improve its QA, performance and integrate UX.

October 8th, 2013 at 22:21
Ivan Dejanovic

I am glad that this topic received so many responses. It means this is important subject to many developers trying to make web a better place for all.

I have entered Web development four and a half year ago at the last few months of Firefox 3.0 if I remember correctly. Firebug was the first tool I used to help me in web development and it is the de facto standard in the company I work for. We really can not thank enough to the people that worked and are still working on it.

At home I deliberately did not installed Firebug so I could give Firefox development tools an honest chance to show me what hey can do. I really think you did I great job on Firefox development tools.

Two suggestions that I would like to see are different for color in Development tools. Firebug gives a hexadecimal format for colors and Firefox development tools give rgb format. I don’t know what the standard is but I am used to hexadecimal format. Second suggestion would be resources tab like Chrome dev tools have. It is sometimes useful to have.

Thanks in advance and keep up with good work on both Firebug and Firefox development tools. Web needs all the good tools it can get.

October 9th, 2013 at 01:40
1. Skoua
  
  The latest FF nightly has devtools with the hexadecimals colors thing fixed, it’s just a question of time before it land in Aurora (if not yet) and in stable FF.
  
  October 9th, 2013 at 01:46
2. Jeff Griffiths
  
  Thanks for the comments. As Skoua noted the color issue has been fixed in nightly. We have plans for providing access to web data resources like localstorage, we’re hoping to provide this in the next 3-6 months.
  
  October 11th, 2013 at 12:04
Matěj Cepl

Two things. Yes, +1 to the Resources tab (including the IndexedDB and localStorage browser).

Also, the functionality I would kill for when I need (and it is more often than I like): aside from CSS rules, Box Model, I would love to have list of all event handlers “attached to” the given element.

I know that it is more complicated than that (including all effects of event bubbling up and down the DOM tree), so I am not sure about the exact UI, but in those moment when I am breaking my head over “why in the world we’ve got HERE?” I would kill for such list.

October 9th, 2013 at 02:03
1. Dave Camp
  
  Event handlers attached to a given element should happen soon (all the plumbling is there, it just needs a UI).
  
  October 9th, 2013 at 09:17
  1. Hervé Renault
    
    Do you mean we will have the same kind of “break on attribute change” we had in Firebug ?
    
    October 25th, 2013 at 08:52
    1. Jeff Griffiths
      
      Currently in nightly we have ‘break on DOM events’ in the debugger, so you can break on ‘click’ for example. Here’s a screenshot:
      
      http://goo.gl/7cTDJa
      
      October 25th, 2013 at 10:10
2. Sebastian Zartner
  
  Firebug introduced a new command lately called getEventListeners(), which does the trick. It currently allows you to see the event listeners within the DOM, but its UI will be improved with the next major release.
  
  October 16th, 2013 at 04:53
Koala Yeung

One handy Firebug feature I miss is its ability to highlight the relevant DOM item while my cursor is hover on any HTML tag in HTML inspector. Instead of hovering, I have to click on each tag to get similar effect.

Is there any plan to change this behaviour?

October 9th, 2013 at 02:26
Flavio

FF native debugger is catching up fast but is no way up to Firebug or Chrome dev tool standards.

I am super loyal to FF and i avoid using Chrome, so sometimes i am forced to use Firebug, but it just slow down the whole browser that it’s ridicolous.

What you guys need to add is:
– autocompletion of css properties
– edit as HTML, as chrome does
– images URL (html and css) should be clickable and automatically opened in a new tab, as chrome does

October 9th, 2013 at 02:50
1. Mike Ratcliffe
  
  – autocompletion of css properties
  — This is already available
  – edit as HTML, as chrome does
  — We are working on it
  – images URL (html and css) should be clickable and automatically opened in a new tab, as chrome does
  — We are working on it
  
  October 9th, 2013 at 04:52
  1. Skoua
    
    If this is a place where we can ask for new features, I’d love to have IPs displayed in the network panel.
    
    October 9th, 2013 at 05:09
    1. fbender
      
      Please file a bug with the dev tools component in bugzilla.mozilla.org (you may file a general Firefox bug and it will be moved to the correct component). That way your request won’t get lost!
      
      October 10th, 2013 at 00:05
  2. Stephan
    
    – images URL (html and css) should be clickable and automatically opened in a new tab, as chrome does
    – We are working on it
    
    This is good news and would be a big increase in usability for sure.
    I used operas dev tool for a long time now (Their real Opera – not that chrome clone) and it´s nice too see that FF catches up, since FF is the only real alternative to me now. Thank you for all the hard work ;)
    
    October 11th, 2013 at 02:27
2. Albert
  
  As mentioned in the post and in some comments the FB team works on the “slowing down” issue, see
  https://blog.getfirebug.com/2013/10/05/firebug-1-12-3/ and
  http://code.google.com/p/fbug/issues/detail?id=6821
  
  October 10th, 2013 at 05:10
  1. Sebastian Zartner
    
    Jan ‘Honza’ Odvarko already found a fix for the slow-down problem (https://bugzil.la/815603) based on the idea of Julien Wajsberg in that bug.
    So this should be finally fixed with Firebug 1.12.4.
    
    October 16th, 2013 at 05:05
Kyle Kress

I would like to see source maps for SASS

October 9th, 2013 at 08:09
Dhruva Ray

What – I wonder – is the future for extension writers like us? Backbone Eye for Firebug : http://dhruvaray.github.io/spa-eye/

October 9th, 2013 at 09:32
1. Dave Camp
  
  The future of your extension is totally up to you, of course. We’d love to help you add support for the Firefox Developer Tools, feel free to stop by irc.mozilla.org #devtools or send mail to the mailing list at https://lists.mozilla.org/listinfo/dev-developer-tools
  
  October 10th, 2013 at 15:40
2. Jeff Griffiths
  
  Dhruva – currently we have some basic extension support[1] for the developer tools ( Paul Rouget’s JSTerm extension is implemented using this ) but we are very interested in expanding this support to allow developers such as yourself to create great tools. I have some basic thoughts on the sorts of features we would need published here:
  
  https://github.com/mozilla/devtools-reqs/blob/master/devtools-api/index.md
  
  I would be curious to hear feedback from you on what you think is missing that you would need to create extensions like Backbone Eye with the Firefox Developer Tools.
  
  [1]https://developer.mozilla.org/en-US/docs/Tools/DevToolsAPI
  
  October 11th, 2013 at 11:29
  1. Dhruva Ray
    
    Hi Jeff
    
    Thanks for sharing the links!
    
    The ability to re-use the same UI metaphors provided by Firebug – within our own extension seamlessly – was a big win to us while we were developing Backbone Eye. It gave us the great value of allowing users to exploit standard Firebug features (and navigation) in our own extension (see this link for an example > http://dhruvaray.github.io/spa-eye/site/img/zombie_4.png)
    
    I am going through the links you shared, but I would definitely like extensions to the Firefox dev tools to look and share the same presentation idioms as the platform tools…
    
    Regards,
    Dhruva Ray
    
    October 22nd, 2013 at 02:23
Marcus

Can someone please add the option to dock the HTML of the “inspect element” view on the bottom and the CSS on the right/left… It used to be like this and it seems like a lot of people liked it… Moreover, it seems like a lot of people HATE the way it is now (side-by-side, or stacked) in one pane… It works better with most of us when this configuration is like an “L” or flipped-L like this: _| ….

Is this this place where I can/should make this suggestion? I am really in need of this feature. Please change it back to the old layout fast. Thanks

October 16th, 2013 at 13:27
1. Jeff Griffiths
  
  The best place to make enhancement requests for the tools is bugzilla:
  
  https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox&component=Developer%20Tools
  
  October 16th, 2013 at 13:48
Alexander

When normally using the Chrome developer tools, the single most important thing that one notices about the Firefox developer tools is that they are hilariously complicated.

October 22nd, 2013 at 05:01
1. Robert Nyman [Editor]
  
  Thanks for your feedback. It would be appreciated, however, if you could give any specific examples of what you find complicated.
  
  October 22nd, 2013 at 08:12
acturbo

I’m a long time Firebug user … i have to say, really awesome new web tools. I am very happy that you guys created the 3D view — it’s fantastic.

October 29th, 2013 at 20:40
Sau

Is there a way to get the console in the same pane as the debugger?

October 30th, 2013 at 12:38
1. Jeff Griffiths
  
  Not currently, but allowing console access from the debugger and inspector are things we are definitely considering for our roadmap, and getting feedback from users definitely helps us prioritize!
  
  Question: are you mainly interested in seeing error messages in the debugger, or entering JS code, or both?
  
  October 30th, 2013 at 13:48
  1. Sau
    
    Well entering JS code is the one I’m interested but having both would probably be more helpful.
    
    Also thanks for all your work, really liking the new dev tools.
    
    November 6th, 2013 at 10:41

Comments are closed for this article.

Hacks

By Robert Nyman [Editor emeritus]

Why The Built-in Tools?

How is Firebug Doing?

What’s Next for Firefox Developer Tools?

About Robert Nyman [Editor emeritus]

71 comments

Firefox Developer Tools and Firebug

By Robert Nyman [Editor emeritus]

Why The Built-in Tools?

How is Firebug Doing?

What’s Next for Firefox Developer Tools?

About Robert Nyman [Editor emeritus]

Discover great resources for web development

Thanks! Please check your inbox to confirm your subscription.